import { Box, display } from "@mui/system"
import {
  CapsuleTabs,
  Divider,
  ImageViewer,
  SearchBar,
  SideBar,
  Space,
} from "antd-mobile"
import React, { useEffect, useRef, useState } from "react"
import SourceList from "./components/SourceList"
import {
  getAllMusic,
  memoryimage,
  memoryImageList,
  memorymusic,
  memoryvideo,
  musicList,
} from "@/services"
import {
  IconButton,
  ImageList,
  ImageListItem,
  ImageListItemBar,
} from "@mui/material"
import CheckCard from "../CheckCard"
import { message } from "antd"
import MyMusicCard from "@/pages/alingcenter/List/MUSIC/components/MyMusicCard"
import { useEditorContext } from "@/context/editContext"
export type SourceType = "IMAGE" | "MUSIC" | "VIDEO" | "LRC"
export interface ResourceLibProps {
  sourceTypes?: SourceType[]
  maxCount?: number
  value?: any[]
  onChange?: (value: any) => void
  canload?: boolean //是否能够加载资源
}
export type ExportedResourceLibProps = Pick<
  ResourceLibProps,
  "maxCount" | "sourceTypes"
>
export default (props: ResourceLibProps) => {
  const {
    sourceTypes,
    value = [],
    canload,
    maxCount = 1,
    onChange,
    ...otr
  } = props
  const [imgViewer, setImgViewer] = useState<any>()
  const [active, setActive] = useState<any>(sourceTypes?.[0])
  const [{ userInfo }, dispatch] = useEditorContext()
  return (
    <>
      <Box
        sx={{
          minHeight: 600,
          ".adm-capsule-tabs-content": {
            height: 440,
            overflow: "auto",
          },
          ".adm-capsule-tabs-tab-wrapper": {
            width: 50,
            flex: "none",
            ".adm-capsule-tabs-tab": {
              fontSize: 12,
              padding: "4px",
              width: "inherit",
            },
          },
        }}
      >
        {canload ? (
          <Space style={{ width: "100%" }} direction="vertical">
            <SearchBar showCancelButton placeholder="搜索" />
            <Box>
              <CapsuleTabs
                activeKey={active}
                onChange={(key) => setActive(key)}
              >
                {/* <CapsuleTabs.Tab title="全部" key="All">
              <SourceList></SourceList>
            </CapsuleTabs.Tab> */}
                <CapsuleTabs.Tab
                  title="图片"
                  style={{
                    display: sourceTypes?.includes("IMAGE") ? void 0 : "none",
                  }}
                  key="IMAGE"
                >
                  <SourceList
                    request={memoryimage}
                    ListRender={(data) => {
                      return (
                        <>
                          <ImageViewer
                            getContainer={document.body}
                            image={
                              window.alignConfig.blogSourceMinio +
                              "/memoryimage/" +
                              imgViewer?.value
                            }
                            visible={imgViewer}
                            onClose={() => {
                              setImgViewer(undefined)
                            }}
                            // renderFooter={() => {
                            //   return (
                            //     <Box>
                            //       <Typography.Link
                            //         style={{ fontSize: 14, color: "white" }}
                            //       >
                            //         {imgViewer?.size ?? ""}
                            //       </Typography.Link>
                            //       <Typography.Link
                            //         style={{ fontSize: 12, color: "white" }}
                            //       >
                            //         {dayjs(imgViewer?.lastModified ?? "")?.format(
                            //           "YYYY-MM-DD",
                            //         )}
                            //       </Typography.Link>
                            //     </Box>
                            //   )
                            // }}
                          />
                          <ImageList
                            sx={{ overflow: "hidden" }}
                            variant="quilted"
                            cols={3}
                            rowHeight={160}
                          >
                            {data?.map((item: any, index: number) => {
                              return (
                                <ImageListItem
                                  sx={{
                                    minHeight: 80,
                                    // ":hover": {
                                    //   ">div": {
                                    //     opacity: 1,
                                    //   },
                                    // },
                                  }}
                                  key={index}
                                >
                                  <CheckCard
                                    value={value?.includes(item?.value)}
                                    changeValue={item?.value}
                                    onChange={(changevalue: any) => {
                                      if (value?.length < maxCount) {
                                        onChange &&
                                          onChange([...value, changevalue])
                                      } else {
                                        message.info(
                                          `最多可以选择${(
                                            <span
                                              style={{ fontWeight: "bold" }}
                                            >
                                              {maxCount}
                                            </span>
                                          )}个哦`,
                                        )
                                      }
                                    }}
                                  >
                                    <img
                                      style={{
                                        display: "inline-block",
                                        borderRadius: "2px",
                                        width: "100%",
                                        height: "100%",
                                        objectFit: "cover",
                                      }}
                                      onClick={() => {
                                        setImgViewer({ ...item, index })
                                      }}
                                      src={
                                        window.alignConfig.blogSourceMinio +
                                        "/memoryimage/" +
                                        item?.value
                                      }
                                      alt={"loading"}
                                      loading="lazy"
                                    />
                                  </CheckCard>

                                  {/* <Box
                                sx={{
                                  background: "rgba(0, 0, 0, 0.5)",
                                  p: 1,
                                  position: "absolute",
                                  bottom: 0,
                                  opacity: 0,
                                  width: "-webkit-fill-available",
                                  display: "flex",
                                  flexDirection: "column",
                                  transitionDuration: "0.3",
                                }}
                              >
                                <Typography.Text
                                  style={{ fontSize: 14, color: "white" }}
                                >
                                  {item.size}
                                </Typography.Text>
                                <Typography.Text
                                  style={{ fontSize: 12, color: "white" }}
                                >
                                  {dayjs(item.lastModified)?.format(
                                    "YYYY-MM-DD",
                                  )}
                                </Typography.Text>
                              </Box> */}
                                </ImageListItem>
                              )
                            })}
                          </ImageList>
                        </>
                      )
                    }}
                  ></SourceList>
                </CapsuleTabs.Tab>
                <CapsuleTabs.Tab
                  style={{
                    display: sourceTypes?.includes("MUSIC") ? void 0 : "none",
                  }}
                  title="音频"
                  key="MUSIC"
                >
                  <SourceList
                    request={memorymusic}
                    ListRender={(list: any[]) => {
                      return (
                        <Box>
                          {list?.map((item, index) => {
                            return (
                              <Box key={index} sx={{ pb: 1 }}>
                                <CheckCard
                                  value={
                                    value?.filter?.(
                                      (i) => item?.value?.[1] == i?.url,
                                    )?.length > 0
                                  }
                                  changeValue={item?.value?.[1]}
                                  onChange={(changevalue: any) => {
                                    if (value?.length < maxCount) {
                                      onChange &&
                                        onChange([
                                          ...value,
                                          {
                                            name: item?.value?.[0],
                                            url: changevalue,
                                          },
                                        ])
                                    } else {
                                      message.info(
                                        `最多可以选择${maxCount}个哦`,
                                      )
                                    }
                                  }}
                                >
                                  <MyMusicCard
                                    value={{
                                      name: item?.value?.[0],
                                      url:
                                        window.alignConfig.blogSourceMinio +
                                        "/memorymusic/" +
                                        item?.value?.[1],
                                      cover:
                                        window.alignConfig.blogSourceMinio +
                                        "/avatar/" +
                                        userInfo?.avatar,
                                      //artist: item.singer,
                                    }}
                                  ></MyMusicCard>
                                </CheckCard>
                              </Box>
                            )
                          })}
                        </Box>
                      )
                    }}
                  ></SourceList>
                </CapsuleTabs.Tab>
                <CapsuleTabs.Tab
                  style={{
                    display: sourceTypes?.includes("VIDEO") ? void 0 : "none",
                  }}
                  title="视频"
                  key="VIDEO"
                >
                  <SourceList
                    request={memoryvideo}
                    ListRender={(list: any[]) => {
                      return (
                        <Box>
                          {list?.map((item, index) => {
                            console.log(item, value)
                            return (
                              <Box key={index} sx={{ pb: 1 }}>
                                <CheckCard
                                  value={
                                    value?.filter?.((i) => item?.value == i)
                                      ?.length > 0
                                  }
                                  changeValue={item?.value}
                                  onChange={(changevalue: any) => {
                                    if (value?.length < maxCount) {
                                      onChange &&
                                        onChange([...value, changevalue])
                                    } else {
                                      message.info(
                                        `最多可以选择${maxCount}个哦`,
                                      )
                                    }
                                  }}
                                >
                                  <video
                                    style={{
                                      display: "inline-block",
                                      borderRadius: "2px",
                                      width: "100%",
                                      height: "100%",
                                      objectFit: "cover",
                                    }}
                                    onClick={() => {
                                      setImgViewer({ ...item, index })
                                    }}
                                    src={
                                      window.alignConfig.blogSourceMinio +
                                      "/memoryvideo/" +
                                      item?.value
                                    }
                                  ></video>
                                </CheckCard>
                              </Box>
                            )
                          })}
                        </Box>
                      )
                    }}
                  ></SourceList>
                </CapsuleTabs.Tab>
                <CapsuleTabs.Tab
                  style={{
                    display: sourceTypes?.includes("LRC") ? void 0 : "none",
                  }}
                  title="歌词"
                  key="LRC"
                >
                  {/* <SourceList></SourceList> */}
                </CapsuleTabs.Tab>
              </CapsuleTabs>
            </Box>
          </Space>
        ) : null}
      </Box>
    </>
  )
}
